<template>
    <div class="userpop">
        <div class="data-num">
            <div class="num-item">
                <h2>{{ user.userInfo.eventCount }}</h2>
                <div class="nitem">动态</div>
            </div>
            <div class="num-item">
                <h2>{{ user.userInfo.follows }}</h2>
                <div class="nitem">关注</div>
            </div>
            <div class="num-item">
                <h2>{{ user.userInfo.followeds }}</h2>
                <div class="nitem">粉丝</div>
            </div>
        </div>
        <!-- 签到 -->
        <div class="qiandao">
            <el-button round icon="Coin">签到</el-button>
        </div>
        <ul class="userinfo-list">
            <li>
                <span>
                    <i class="iconfont icon-dengji"></i>
                    等级
                </span>
                <span>
                    <i>Lv:{{ info.level }}</i>
                    <i class="iconfont icon-next"></i>
                </span>
            </li>
            <li @click="gotoMyHome">
                <span>
                    <i class="iconfont icon-gerenzhuye"></i>
                    个人主页
                </span>
                <i class="iconfont icon-next"></i>
            </li>
            <li>
                <span>
                    <i class="iconfont icon-gerenshezhi"></i>
                    个人设置
                </span>
                <i class="iconfont icon-next"></i>
            </li>
            <li @click="logoutBy">
                <span>
                    <i class="iconfont icon-tuichudenglu"></i>
                    退出登录
                </span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { useUserStore } from '@/store/user.js'
import { onMounted, reactive } from 'vue'
import { getUserDetail } from '@/api/userdetail/userdetail.js'
import { useRouter } from 'vue-router'
import { logout } from '@/api/login/login.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getItem, removeItem } from '@/utils/utils.js'
const emit = defineEmits(['closeuserPop'])
const router = useRouter()
const user = useUserStore()
const info = reactive({
    level: 1,  //用户等级等级
})
//获取用户个人信息 
async function getUserDetailBy() {
    let res = await getUserDetail(user.userInfo.userId)
    // console.log(res);
    // console.log(res.data.profile);
    if (res.data.code === 200) {
        info.level = res.data.level
        user.userInfo = res.data.profile
    }
}

//前往登录用户个人主页
function gotoMyHome() {
    router.push({
        name: 'UserDetail',
        params: {
            uid: user.userInfo.userId
        }
    })
}

//退出登录 
function logoutBy() {
    ElMessageBox.confirm('你确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
    }).then(() => {  //点击确定
        logout(getItem('cookie')).then(res => {  //退出成功
            console.log(res);
            ElMessage({  //显示提示信息
                message: '退出成功!',
                type: 'success',
                center: true,
                showClose: true
            })
            //更新登录状态
            user.updateLogin(false)
            user.clearUserInfo()  //清空用户个人信息
            user.clearUserSongList()  //清空用户私人歌单
            user.clearUserLikeSongIds()  //清空用户喜欢音乐id列表
            removeItem('cookie')  //清除cookie
        })
    }).catch(err => {   //点击取消
        ElMessage({
            type: 'info',
            message: '已取消',
            showClose: true,
            center: true
        })
    })
}

onMounted(() => {
    getUserDetailBy()
    
    // 点击其他区域关闭弹框
    document.addEventListener('click', e => {
        let showuserpop = document.querySelector("#showuserpop");
        if (showuserpop) {
            if (!showuserpop.contains(e.target)) {
                emit('closeuserPop')
            }
        }
    });
})
</script>

<style lang="scss" scoped>
.userpop {
    position: absolute;
    top: 62px;
    right: 45px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 2px 2px #eef;

    .data-num {
        display: flex;
        justify-content: center;
        margin: 10px 0;

        .num-item {
            margin: 0px 30px;
            text-align: center;
            cursor: pointer;

            .nitem {
                color: #a4a4a4;
                font-size: 12px;
            }
        }
    }

    .qiandao {
        margin-top: 15px;
        text-align: center;
        padding-bottom: 15px;
        margin-left: 20px;
        margin-right: 20px;
        border-bottom: 1px solid #a4a4a4;
    }

    .userinfo-list {
        margin: 5px 0;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 15px 5px;

            &:hover {
                background-color: #eee;
            }

            span {
                display: flex;
                align-items: center;

                i {
                    margin-right: 5px;
                }
            }
        }
    }

}

:deep(.el-button) {
    padding: 8px 30px;
    border-radius: 20px;
}

:deep(.el-button:hover) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}

:deep(.el-button:focus) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}
</style>